<template>
	<div class="banner">
		<swiper :options="swiperOption">
		    <swiper-slide v-for='item in swiperList'>
	    	<img :src="item.imgUrl">
	   		</swiper-slide>
		    <div class="swiper-pagination"  slot="pagination"></div>
		 </swiper>
	</div>
</template>
<script>
  export default {
  	props:[
		'swiperList'
	],
    data() {
	  return {
	    swiperOption: {
	    	pagination: {
	            el: '.swiper-pagination'
	        }
	    }
	  }
	}
  }
</script>
<style lang='stylus' scoped>
	*{
		touch-action: pan-y;
	}
	.banner{
		position: relative;
		background: #ccc;
		height: 2.6666666rem;
	}
	.banner img{
		width:100%;
	}
	.swiper-pagination >>> .swiper-pagination-bullet-active{
		background: #fff;
	}
</style>